<template>
  <section class="content clear">
    <section class="inner-top">
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="1"></el-tab-pane>
        <el-tab-pane label="用户授权" name="2"></el-tab-pane>
      </el-tabs>
    </section>
    <section class="inner-bottom">
      <!-- 角色管理 -->
      <roleManageTab v-if="activeName==='1'"></roleManageTab>
      <!-- 角色授权 -->
      <userManage v-if="activeName==='2'"></userManage>
    </section>
  </section>
</template>
<script>
import roleManageTab from './components/roleManageTab'
import userManage from './components/userEmpower'
import {findRoleByRoleQueryUsingPOST, createRoleUsingPOST, deleteRoleUsingDELETE, updateRoleUsingPUT} from '@api/systemManage'
export default {
  name: 'roleManage',
  components: {
    roleManageTab,
    userManage
  },
  data () {
    return {
      activeName: '1',
      isAddOrEdit: 'add', // add:新增；edit:编辑角色
      roleForm: {
        name: null,
        enabled: '0', // (1:启用, 0:禁用)
        description: null
      },
      roleFromRules: {
        name: [{required: true, message: '请输入角色名称', blur: 'blur'}],
        enabled: [{required: true, message: '请选择角色状态', blur: 'blur'}],
        description: [{required: true, message: '请输入角色描述', blur: 'blur'}]
      },
      dialogVisible: false,
      rorleName: null,
      roleStatus: -1,
      tableData: [],
      page: {
        current: 1,
        total: 0,
        size: 10
      }
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    initPage () {
      let params = {
        'enabled': Boolean(this.roleStatus),
        'name': this.rorleName,
        'page': this.page.current,
        'size': this.page.size
      }
      if (this.roleStatus === -1) { // 1:表示全部；不传enabled参数
        delete params.enabled
      }
      findRoleByRoleQueryUsingPOST(params).then(res => {
        if (res.status) {
          this.page.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },
    addNewRole (type = 'add', rowData = null) {
      this.isAddOrEdit = type
      this.dialogVisible = true
      if (type === 'edit') { // 编辑时赋值
        this.roleForm = Object.assign({}, rowData, {
          enabled: rowData.enabled ? '1' : '0'
        })
      }
    },
    sureAddOrEditRole (formName) {
      this.$refs[formName].validate(validate => {
        if (validate && this.isAddOrEdit === 'add') {
          this.addRole()
        } else if (validate && this.isAddOrEdit === 'edit') {
          this.editRole()
        }
      })
    },
    addRole () {
      let params = {
        'description': this.roleForm.description,
        'enabled': Boolean(Number(this.roleForm.enabled)),
        'isInit': false,
        'name': this.roleForm.name
      }
      createRoleUsingPOST(params).then(res => {
        if (res.status) {
          this.$message.success('新增角色成功')
          this.initPage()
          this.handleClose()
        }
      })
    },
    editRole () {
      let params = Object.assign({}, this.roleForm, {
        'enabled': Boolean(Number(this.roleForm.enabled))
      })
      updateRoleUsingPUT(this.roleForm.id, params).then(res => {
        if (res.status) {
          this.$message.success('编辑角色成功')
          this.initPage()
          this.handleClose()
        }
      })
    },
    delRole (rowData) {
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRoleUsingDELETE(rowData.id).then(res => {
          if (res.status) {
            this.$message.success('删除成功')
            this.initPage()
          }
        })
      }).catch(() => {

      })
    },
    handleClose () {
      this.$refs['roleForm'].resetFields()
      this.$refs['roleForm'].clearValidate()
      this.dialogVisible = false
    },
    search () {
      this.page.current = 1
      this.page.size = 10
      this.initPage()
    },
    handleSizeChange (val) {
      this.page.size = val
      this.initPage()
    },
    handleCurrentChange (val) {
      this.page.current = val
      this.initPage()
    }
  }
}
</script>
